<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="../../mytags.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <t:base type="jquery,validform"></t:base>
    <script type="text/javascript" src="webpage/com/wx/added_product/procurement/shoppingCar.js"></script>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>零件采购</title>
    <script type="text/javascript" charset="utf-8">
        mui.init();
        if($.isEmptyObject(_Car.getSelectedProducts())){
            window.location = "purchaseorderController.do?purchaseorder";
        }
        mui.plusReady(function () {
            var _SELF = plus.webview.currentWebview();
        })

        function sendVerifyCode(liveTime,obj){
            obj = $("#formobj").find("input[name='contactsPhone']");
            if($.isEmptyObject(obj)){
                return;
            }
            var phoneNumber = obj.val();
            var regex = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$|^1[0-9]{10}$/;
            if($.isEmptyObject(phoneNumber) || phoneNumber == ''){
                mui.alert("请输入联系号码")
                return;
            }
            if(!regex.test(phoneNumber)){
                mui.alert("号码格式不正确");
                return;
            }
            $.getJSON('wxMenuController.do?sendVerifyCode',{phoneNumber:phoneNumber},function(data){
                if(data.success){
                    $('#sendBtn').removeAttr('href');
                    $('#sendBtn').css('background-color','#D7DFE8').css('border','1px solid #D7DFE8').html(liveTime);
                    $("input[name='contactsPhone']").attr('disabled','disabled');
                    var time = setInterval(function(){
                        var ss = Number($('#sendBtn').html());
                        if(ss != 0){
                            $('#sendBtn').html(ss-1);
                        }else{
                            window.clearInterval(time);
                            $('#sendBtn').css('background-color','#eb606b').css('border','1px solid #e70012').html("验证码");
                            $('#sendBtn').attr('href','javascript:sendCode()');
                            $("input[name='contactsPhone']").removeAttr('disabled');
                            return;
                        }
                    },1000);
                }else{
                    mui.alert(data.msg);
                }
            });
        }
    </script>
    <style>
        *{
            font-size:14px !important;
        }
        .inr span {
            line-height: 40px;
        }

        .inrr h4 span{
            color:black;
        }

        .mui-input-clear {
            margin-bottom: 0px !important;
        }
        .mui-input{
            /*border : none !important;*/
            margin-bottom: 0 !important;
        }

        #invoiceCardDiv input{
            width:70%;
            height:30px;
            border:none;
        }
        #invoiceCardDiv h4{
            width:100%;
            line-height: 30px;
        }
        .inrr h4{
            width:100%;
            line-height: 30px;
        }
        .inrr input{
            width:70%;
            height:30px;
        }
        .inrr h4 span{
            line-height: 30px;
        }
        .red{
            color: red !important;
            width: 5px !important;
            float: right !important;
            margin: 0 !important;
        }

        td{
            text-align: left !important;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<script type="text/jTemplate" id="equipTemplate">
    {#foreach $T as item}
    <li class="mui-table-view-cell">
        <div class="ct-choose" style="width:100%" data-id="${ct.id}">
            <div class="ct-name">{$T.item.sn}</div>
            <div class="ct-phone inrr">{$T.item.desc}</div>
        </div>
    </li>
    {/#for}
</script>
<script type="text/jTemplate" id="buyItemsTemplate">
    {#foreach $T as item}
    <tr>
        <td><input type="hidden" name="selProId" value="{$T.}">{$T.item.part.wechatName}</td>
        <td class="zb">{$T.item.count}</td>
        <td class="sk_tt price-group">
            <span>¥{formatMoney(Number($T.item.price),2)}</span><br/>
            <span>¥{formatMoney(Number($T.item.part.terminalPrice),2)}</span>
        </td>
    </tr>
    {/#for}
</script>
<div class="inxp inn">
    <table class="buy">
        <thead>
            <tr class="buyr">
                <td width="60%">产品名称</td>
                <td width="10%" class="zb">数量</td>
                <td width="30%" style="text-align: left;">金额</td>
            </tr>
        </thead>

        <tbody id="buyTable">

        </tbody>

        <tfoot>
        <tr class="zj">
            <td>合计</td>
            <td class="zb"></td>
            <td class="sk_tt"></td>
        </tr>
        </tfoot>

    </table>
</div>



<div class="mui-card mui-input-row mui-checkbox mui-left li_f mui-clearfix" style="margin: 0; margin-top: 10px;border-radius: 0px;padding-top:10px;">
    <div class="inr" style="margin-left: 0px;">

        <div class="inrr" style="padding-bottom: 10px;width:100%">
            <h4 style="margin:0;">
                <span><span class="red">*</span>设备序列号</span>&nbsp;
                <input type="text" class="mui-input" placeholder="放映机序列号" id="snNum"  nullmsg="请填写设备序列号"
                        style="width:70%">
            </h4>
        </div>
    </div>
</div>


<div class="mui-card"
     style="margin: 0; box-shadow: none; background: none;">
    <ul class="mui-table-view hn">
        <li>
            <form action="" id="formobj">
                <div class="mui-input-row mui-checkbox mui-left li_f mui-clearfix">
                    <div class="inr" style="margin-left: 0px;">
                        <h3 style="padding-left:15px;">
                            <img src="${webRoot}/images/about.jpg"
                                 style="max-width: 5px; margin-right: 10px; vertical-align: bottom;">收货人信息
                        </h3>
                        <div class="inrr" style="width:100%">
                            <h4>
                                <span><span class="red">*</span>所属影院</span>${address.belongCinema}&nbsp;
                                <input class="mui-input" type="text" id="cinemaName" value="${cinemaName}" placeholder="填写影院名称"/>
                            </h4>
                            <h4>
                                <span><span class="red">*</span>联系人</span>${address.contactName}&nbsp;
                                <input type="text" class="mui-input" placeholder="填写姓名" id="contactName"  nullmsg="请填写联系人姓名"
                                       value="${address.contactName}" style="width:70%">
                            </h4>
                            <h4>
                                <span><span class="red">*</span>邮箱</span>${address.mail}&nbsp;
                                <input type="text" class="mui-input" id="contactEmail" placeholder="填写邮箱" datatype="e"
                                       value="${address.mail}" style="width:70%">
                            </h4>
                            <h4>
                                <span><span class="red">*</span>电话</span>${address.phone}&nbsp;
                                <input type="text" class="mui-input" placeholder="填写联系号码" name="contactsPhone" id="contactPhone" datatype="cPhone" nullmsg="请填写联系号码" errormsg="号码格式不正确"
                                       value="${address.phone}" style="width:70%">
                            </h4>
                            <h4>
                                <span><span class="red">*</span>验证码</span>&nbsp;
                                <input type="text" style="width:30%" id="verifyCode" datatype="n" nullmsg="请输入验证码" placeholder="验证码"/>
                                <a href="javascript:sendVerifyCode(<%=StaticValue.SEND_RANDOMCODE_LIVETIME%>)" id="sendBtn" class="a-verify">发送验证码</a>

                            </h4>
                        </div>
                    </div>
                </div>
            </form>
        </li>
    </ul>
</div>

<div class="mui-card mui-input-row mui-checkbox mui-left li_f mui-clearfix" style="margin: 0; margin-top: 10px;border-radius: 0px;padding-top:10px;">
    <div class="inr" style="margin-left: 0px;">
        <h3 style="padding-left:15px;">
            <img src="${webRoot}/images/about.jpg"
                 style="max-width: 5px; margin-right: 10px; vertical-align: bottom;">服务协议
        </h3>
        <div class="inrr" style="padding: 5px 5px;">
            在本协议执行过程中，如果出现了不可抗力事件，并在事实上影响本协议的正确履行时，受不可抗力情况影响的一方应尽快将情况通知对方，并尽快证明文件提交对方确认。
        </div>
    </div>
</div>

<div class="mui-card" style="margin: 0; margin-top: 10px;">
    <form class="mui-input-group" style="border: none;">
			<span style="float: left; padding: 15px; color: #333; font-size: 14px;">&nbsp;&nbsp;&nbsp;&nbsp;上门服务</span>
        <div class="mui-input-row mui-radio mui-left ra">
            <label>是</label> <input name="isOnsiteServices" type="radio" value="1" class="isOnsiteServices" >
        </div>
        <div class="mui-input-row mui-radio mui-left ra">
            <label>否</label> <input name="isOnsiteServices" class="isOnsiteServices" type="radio" value="0" checked>
        </div>

    </form>
</div>

<div style="margin-top:2px;font-size:0.8em;padding-left:10px;color:red">
    温馨提示：上门服务需要额外收取一定费用，请您知晓。
</div>


<div style="width:92%;margin: 1em auto;">
    <a class="mui-btn mui-btn-block mui-btn-primary" id="subOrder" style="font-size:1.6em !important;">提交订单</a>
</div>
<!--签到弹窗输入设备-->
<div class="mui-backdrop" style="display: none;">
    <div class="tanc">
        <h1>提交订单成功！</h1>
        <h3>我们的工程师会通过电话与您确定联系，请保持电话通畅</h3>
        <h4>您可以在个人中心-我的订单中查看订单情况</h4>
        <a href="#" class="que">确认</a>
    </div>
</div>
<div id="demo1" class="mui-progressbar mui-progressbar-infinite" style="display:none;top:50%">
    <span></span>
</div>
<script type="text/javascript">

    function buildSubmitParam() {
        var params = {
            selectedPro: _Car.getSelectedProductIds().join(","),
            selectedEquip : $("#snNum").val(),
            contactName: $("#contactName").val(),
            contactPhone: $("#contactPhone").val(),
            contactEmail: $("#contactEmail").val(),
            isOnsiteServices: $(".isOnsiteServices:checked").val(),
            cinemaName : $("#cinemaName").val()

        }
        return params;
    }

    function validOrderForm() {


        /*选购产品*/
        if ($("#buyTable").children().length == 0) {
            mui.alert("请选择要购买的商品", "订单提示");
            return false;
        }

        var sn = $("#snNum").val();
        if(sn == ''){
            mui.toast("请填写设备序列号");
            return false;
        }
        
        var cinemaName = $("#cinemaName").val();
        if(cinemaName == ''){
            mui.toast("请填写影院信息");
            return false;
        }
        
        var contactName = $("#contactName").val();
        if(contactName == ''){
            mui.toast("请填写联系人信息");
            return false;
        }
        if(contactName.length > 10){
            mui.toast("联系人信息过长");
            return false;
        }
        var contactEmail = $("#contactEmail").val();
        var regex = new RegExp($.Datatype.e);
        if(!regex.test(contactEmail)){
            mui.toast("邮箱格式不正确");
            return false;
        }

        var contactPhone = $("#contactPhone").val();
        regex = new RegExp($.Datatype.cPhone);
        if(!regex.test(contactPhone)){
            mui.toast("联系电话不正确");
            return false;
        }
        
        var verifyCode = $("#verifyCode").val();
        if(verifyCode == ''){
            mui.toast("请填写验证码");
            return false;
        }
        return true;
    }


    function checkSubOrder() {
        var btn = $("#subOrder");
        btn.unbind("click",checkSubOrder);
        var mask = mui.createMask(function () {
            return false;
        });

        if (validOrderForm()) {
            mask.show();
            var params = buildSubmitParam();
            if (!$.isEmptyObject(params)) {
                mui.confirm("您确认提交订单？",'',['取消','确认'],function(idx){
                    if(idx.index == 1){
                        $.getJSON("wxMenuController.do?checkVerify",{verifyCode : $("#verifyCode").val()},function(re){
                        	if(re.success){
                                $.post("shoppingcar.do?confirmProcurement", params, function (data) {
                                    data = $.parseJSON(data);
                                    if (data.success) {
                                        _Car.init();
                                        localStorage.removeItem(_Car.STORAGEKEY.selectedInvoice);
                                        localStorage.removeItem(_Car.STORAGEKEY.selectedEquip);
                                        setTimeout(function () {
                                            mui.openWindow({
                                                createNew: true,
                                                url: 'purchaseorderController.do?afterSubmit&msg='+data.noteId
                                            })
                                        }, 1000);
                                    }
                                    mask.close();
                                })
                            }else{
                                mui.alert(re.msg,function(){
                                    $(".mui-backdrop").remove();
                                });
                            }
                        })
                    }
                })


            }
        }
        btn.bind("click",checkSubOrder);
        mask._remove();
    }


    $(document).ready(function () {


        $("#subOrder").bind("click",checkSubOrder);

        $("#buyTable").empty();
        $("#buyTable").setTemplate($("#buyItemsTemplate").html()).processTemplate(_Car.getSelectedProducts());

        $(".zj").find(".zb").text(_Car.getCarInfo().checkedCount);
        $(".zj").find(".sk_tt").text("¥" + formatMoney(_Car.getCarInfo().checkedPrice,2));
        $("#partInfo").find("b").text('¥'+_Car.getCarInfo().checkedPrice);
        if($("#invoiceRadioCard").find(":radio:checked").hasClass("shi")){
            $(".xzfp").parent().show();
        }
    })
</script>
</body>
</html>